import './index.css';
import { Row,Col,Progress} from 'antd';
import React, { useState,useEffect } from 'react';
import {HddOutlined,ApiOutlined,CodepenOutlined,MoneyCollectOutlined,Html5Outlined,PushpinOutlined} from '@ant-design/icons'
import axios from '../global/axios';
import api from '../global/api';
const PeculiaryIcon = (props) => {
  var icon = {
    'hdd':<HddOutlined/>,
    'api':<ApiOutlined/>,
    'codepen':<CodepenOutlined/>,
    'money-collect': <MoneyCollectOutlined/>,
    'html5': <Html5Outlined/>,
    'pushpin': <PushpinOutlined/>
  }
  return icon[props.name];
}
const Index = () => {
  const _channel = {channel:'index'};
  const [ bannerInfo, setBannerInfo ] = useState({resText:[{text:'',link:''},{text:'',link:''},{text:'',link:''},{text:'',link:''}]});
  const [ bannerImg, setBannerImg ] = useState('');
  const [peculiary,setPeculiary] = useState([{resContent:''},{resText:[]}]);
  const [skill,setSkill] = useState([{resContent:''},{resText:[]}]);
  const [contents,setContents] = useState([{resContent:''},{resText:[]}]);
  useEffect(()=>{
		const getIndexData = async () => {
      let res = await axios.get(api.getChannel,{params:_channel});
      let pageData = res.data.pageData;
      setBannerInfo(pageData.banner[0]);
      setBannerImg(api.host + pageData.banner[1].resUrl);
      setPeculiary(pageData.peculiary);
      setSkill(pageData.skill);
      setContents(pageData.contents);
    }   
    getIndexData();
  },[]) 
  return(
    <div className="main">
      <div className="banner">
        <Row className="wh banner-inner">
          <Col xs={0} sm={0} md={12} lg={12} xl={12}>
            <div className="text">
              <div className="en line-01">{bannerInfo.resText[0].text}</div>
              <div className="line-02">{bannerInfo.resText[1].text}</div>
            </div>
            <div className="btn">
              <a target="_blank" href={bannerInfo.resText[2].link} className="button en">{bannerInfo.resText[2].text}<span></span></a>
              <a target="_blank" href={bannerInfo.resText[3].link} className="button">{bannerInfo.resText[3].text}<span></span></a>
            </div>
          </Col>
          <Col xs={0} sm={0} md={12} lg={12} xl={12} style={{marginTop:'60px'}}>
            <img src={bannerImg} /> 
          </Col>  
        </Row>
      </div>
      <div className="w tab-side">
        <div dangerouslySetInnerHTML={{__html:peculiary[0].resContent}}></div>
        <Row className="tab1 boxshw">
          {
            peculiary[1].resText.map(item => {
              return(
                <Col className="col1" key={item.text} xs={24} sm={24} md={12} lg={8} xl={8} >
                  <div className="media">
                    <div className="media-left"> <PeculiaryIcon name={item.text} /></div>
                    <div className="media-body" dangerouslySetInnerHTML={{__html:item.link}}></div>
                  </div>
                </Col> 
              )
            })
          }
        </Row>
      </div>
      <div className="w tab-tt">
        <div dangerouslySetInnerHTML={{__html:skill[0].resContent}}></div>
        <Row className="tab3 en boxshw">
          {
            skill[1].resText.map(item => {
              return(
                <Col className="col2" key={item.link} xs={12} sm={12} md={6} lg={6} xl={6} >
                  <Progress percent={parseInt(item.text)} format={percent => item.link} strokeWidth={10} type="dashboard" strokeLinecap="square" status="active"/>
                </Col> 
              )
            })
          }
        </Row>            
      </div>
      <div className="w tab-tt">
        <div dangerouslySetInnerHTML={{__html:contents[0].resContent}}></div>
        <Row className="tab3 en boxshw">
          {
            contents[1].resText.map(item => {
              return(
                <Col className="col4" key={item.link} xs={24} sm={24} md={16} lg={8} xl={8} >
                  <Progress percent={parseInt(item.text)} format={percent => item.link} strokeWidth={10}  strokeLinecap="square" status="active"/>
                </Col> 
              )
            })
          }
        </Row>        
      </div>
    </div> 
  )
}
export default Index;
